<template>
    <div class="code-box">
        <h1>better-keyboard 数字键盘</h1>
        <input type="hidden" id="txtCode">
        <p class="custom-holder">短信验证码（6位数）</p>
        <div class="custom-txt">
            <p class="txt-code"></p>
            <span class="custom-pointer hide"></span>
        </div>
    </div>
</template>

<script>
import Newboard from 'better-keyboard'
export default {
    data() {
        return {
            formValidate: {
                name: '',
                mail: ''
            },
            ruleValidate: {
                name: [
                    { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                ],
                mail: [
                    { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
    },
    created() {
        setTimeout(function() {
            var pointer = document.querySelector('.custom-pointer')
            var keyboard = null
            function changeTxt(rs) {
                console.log(rs)
                var txtCode = document.querySelector('.txt-code')
                var holder = document.querySelector('.custom-holder')
                txtCode.innerText = rs
                if (rs.length > 0) {
                    holder.classList.add('hide')
                } else {
                    holder.classList.remove('hide')
                }
            }
            var pointerTimer = null
            var box = document.querySelector('.code-box')
            box.addEventListener('click', function() {
                // pointerTimer = setInterval(function() {
                //     pointer.classList.toggle('v-h')
                // }, 500)
                if (!keyboard) {
                    keyboard = new Newboard({
                        onInput: function(key, rs) { // 获取用户输入值
                            changeTxt(rs)
                        },
                        onClose: function() {
                            clearInterval(pointerTimer)
                            pointer.classList.add('hide')
                        },
                        onClosed: function() {
                            console.log('closed')
                        },
                        onShow: function() {
                            pointer.classList.remove('hide')
                        },
                        onDelete: function(rs) {
                            changeTxt(rs)
                        },
                        closeTitle: '确定',
                        max: '12'
                    })
                }
                keyboard.show()
            }, false)
        }, 0)
    }
}
</script>

<style>
    p {
        margin:0;
        padding:0;
    }

    .v-h {
        visibility: hidden;
    }
    .code-box {
        position: relative;
        height:44px;
        border: 1px solid #e4e4e4;
        background-color: #fff;
        margin:12px 12px 0 12px;
    }
    .custom-holder {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #acacac;
        padding-left: 10px;
        font-size:13px;
    }
    .custom-holder.hide {
        display:none;
    }
    .custom-txt {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        padding:12px 0 12px 7px;
        font-size:13px;
    }
    .custom-txt p {
        float:left;
        height:16px;
        white-space: nowrap;
    }
    .custom-pointer,.custom-txt span {
        float:left;
        background-color: #49b8ff;
        width:2px;
        margin-left:2px;
        height:16px;
    }
    .custom-pointer.hide {
        display:none;
    }
</style>
